<template>
  <div class="erm-main" :class="{'focous':focous}">
    <div class="erm-main-top">

      <span class="item" @click="choiceFile()" title="打开文件"><svg style="margin-top:4p" t="1617781932710" class="icon" viewBox="0 0 1098 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem">
          <path d="M990.319015 496.104632H197.960698a66.15874 66.15874 0 0 0-62.893763 45.709675l-68.736354 212.910856V180.948451h329.934498a131.801958 131.801958 0 0 0 131.801958 131.973799h330.106338V412.418122a32.99345 32.99345 0 0 0 65.9869 0v-99.495872a66.15874 66.15874 0 0 0-65.9869-66.15874H528.067037a65.815059 65.815059 0 0 1-65.9869-65.9869 65.986899 65.986899 0 0 0-19.246179-46.56888 66.674263 66.674263 0 0 0-46.568879-19.246179H65.986899A66.15874 66.15874 0 0 0 0 180.77661v777.236319a66.15874 66.15874 0 0 0 66.15874 65.986899h792.014635a66.15874 66.15874 0 0 0 63.065604-45.881516l135.066935-416.02678a66.15874 66.15874 0 0 0-65.986899-65.9869z m65.127695-347.805949C1013.861216 68.736354 884.980553-96.918259 565.012827 75.78183c0 0 352.273812-87.295169 395.234033 107.056871l-58.4259 1.374727L1045.65178 274.945415l53.098833-161.874113z" fill="#636e72"></path>
        </svg></span>

      <span class="item" @click="saveFile(true)" title="另存文件">
        <svg style="" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem">
          <path d="M951.149714 610.889143c27.062857 0 49.005714 21.869714 49.005715 48.932571v220.452572c0 68.608-64.512 122.441143-147.017143 122.441143H167.497143c-82.358857 0-146.944-53.833143-146.944-122.441143V659.748571a49.005714 49.005714 0 0 1 98.011428 0v220.452572c0 8.557714 18.651429 24.429714 49.005715 24.429714h685.641143c30.427429 0 49.005714-15.872 49.005714-24.429714V659.821714c0-27.062857 21.942857-48.932571 49.005714-48.932571zM510.537143 22.089143c26.989714 0 49.005714 21.869714 49.005714 49.005714v467.456l161.206857-161.28a48.859429 48.859429 0 0 1 83.675429 34.669714c0 13.019429-5.193143 25.453714-14.409143 34.669715L544.987429 691.492571a49.517714 49.517714 0 0 1-69.193143 0l-244.955429-245.028571a49.005714 49.005714 0 0 1 69.339429-69.193143L461.531429 538.624V71.021714c0-27.062857 21.796571-49.005714 48.932571-49.005714v0.073143z" fill="#636e72"></path>
        </svg>
      </span>

      <span class="item" @click="addNewGraph()" title="新文件">
        <svg style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem">
          <path d="M699.392 754.176v-57.856h-57.856c-59.392 0-107.52-48.128-107.52-107.52s48.128-107.52 107.52-107.52h57.344v-57.856c0-59.392 48.128-107.52 107.52-107.52 6.144 0 12.8 0.512 18.432 1.536V103.424c0-38.912-31.232-70.144-70.144-70.144h-372.224l-361.472 361.472v525.824c0 38.912 31.232 70.144 70.144 70.144h663.552c38.912 0 70.144-31.232 70.144-70.144v-60.416c-6.144 1.024-11.776 1.536-17.92 1.536-59.392 0-107.52-48.128-107.52-107.52z m-319.488-362.496h-264.192l264.192-264.192v264.192z" fill="#636e72"></path>
          <path d="M971.776 558.08h-134.656v-134.656c0-16.896-13.824-30.72-30.72-30.72s-30.72 13.824-30.72 30.72v134.656h-134.144c-16.896 0-30.72 13.824-30.72 30.72s13.824 30.72 30.72 30.72h134.656v134.656c0 16.896 13.824 30.72 30.72 30.72s30.72-13.824 30.72-30.72v-134.656h134.656c16.896 0 30.72-13.824 30.72-30.72s-14.336-30.72-31.232-30.72z" fill="#636e72"></path>
        </svg>
      </span>
      <span style="width:2px;height:1rem;background:#d2d2d2;margin: 0.6rem;" />
      <span class="item" @click="openNewWindow()" title="创建新窗口"><svg style="" t="1617783130680" class="icon" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem">
          <path d="M256 0v853.333333h1024V0z m938.666667 768H341.333333V256h853.333334z" fill="#636e72"></path>
          <path d="M85.333333 341.333333h85.333334V256H0v768h938.666667v-85.333333H85.333333V341.333333z" fill="#636e72"></path>
        </svg></span>

      <!-- <span class="item">另存</span> -->

      <span class="item" title="专注模式">
        <i class="fa" :class="{'fa-eye-slash':!focous,'fa-eye':focous}" @click="focous=!focous"></i>
      </span>
      <span class="item" title="帮助">
        <i class="fa fa-question-circle-o" @click="helpeModal=true"></i>
      </span>
      <span class="item" v-if="!childWindow" title="铺满">
        <i class="fa" :class="{'fa-compress':maxWindowStatus,'fa-expand':!maxWindowStatus}" @click="maxWindow($event)"></i>
      </span>
      <!-- 文件列表 -->
      <div style="display: flex;overflow: auto;flex: 1;margin-right: 10px;">
        <div class="item" v-for="(file,index) in xmlFiles" style="cursor: default;" :g-id='file.id' :key="index">
          <span @click="changeFile(index)" class="file-tab" :class="{'actived':xmlFiles[fileShowIndex].id==file.id,'file-no-save':xmlFiles[index].change}">
            {{file.name}}
            <i class="fa fa-close" @click.stop="closeFile(index)" title="关闭"></i>
          </span>
        </div>
      </div>

    </div>

    <div class="chart-wrap">

      <div class="new-erm" v-show="xmlFiles.length==0">
        <svg style="margin-bottom:4px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" @click="addNewGraph">
          <path d="M699.392 754.176v-57.856h-57.856c-59.392 0-107.52-48.128-107.52-107.52s48.128-107.52 107.52-107.52h57.344v-57.856c0-59.392 48.128-107.52 107.52-107.52 6.144 0 12.8 0.512 18.432 1.536V103.424c0-38.912-31.232-70.144-70.144-70.144h-372.224l-361.472 361.472v525.824c0 38.912 31.232 70.144 70.144 70.144h663.552c38.912 0 70.144-31.232 70.144-70.144v-60.416c-6.144 1.024-11.776 1.536-17.92 1.536-59.392 0-107.52-48.128-107.52-107.52z m-319.488-362.496h-264.192l264.192-264.192v264.192z" fill="#636e72"></path>
          <path d="M971.776 558.08h-134.656v-134.656c0-16.896-13.824-30.72-30.72-30.72s-30.72 13.824-30.72 30.72v134.656h-134.144c-16.896 0-30.72 13.824-30.72 30.72s13.824 30.72 30.72 30.72h134.656v134.656c0 16.896 13.824 30.72 30.72 30.72s30.72-13.824 30.72-30.72v-134.656h134.656c16.896 0 30.72-13.824 30.72-30.72s-14.336-30.72-31.232-30.72z" fill="#636e72"></path>
        </svg>
        <div>新建RE图</div>
      </div>
      <graph-index @change-file-status='changeFileStatus($event,index)' @change-file-name='reloadFileName($event,index)' class="graphEditor" style="overflow: auto;width: 100%;height: 100%;" v-for="(file,index) in xmlFiles" :key="file.id" :graphId='file.id' :ref="'graph-index-'+file.id" v-show="xmlFiles[fileShowIndex].id==file.id" />

    </div>
    <div class="helpe-moadl" v-if="helpeModal">
      <div style="font-weight: bold;">AWork erm 使用帮助</div>
      <div style="">PS：更多能力需要 <a href="https://gitee.com/conesat/awork/attach_files/686109/download/AWork-0.2.2.exe">下载应用版（github）</a>。</div>
      <div style="margin-top: 2rem;"></div>
      <div style="line-height: 2rem;display: flex;">工具栏： <img src="" alt="图片Base64编码" style="max-width:90%; max-height:2000px;" />
      </div>
      <div style="margin-left: 2rem;">依次为：打开文件、新建erm | 新窗口、专注模式、帮助、最大化</div>
      <div style="margin-left: 2rem;">打开文件：无解</div>
      <div style="margin-left: 2rem;">新建erm：无解</div>
      <div style="margin-left: 2rem;">新窗口：打开一个单独窗口（web不支持）</div>
      <div style="margin-left: 2rem;">专注模式：聚焦出高亮，其余变浅</div>
      <div style="margin-left: 2rem;">帮助：无解</div>
      <div style="margin-left: 2rem;">最大化：无解</div>

      <div style="margin-top: 2rem;"></div>
      <div style="line-height: 2rem;display: flex;">如何操作画布：</div>
      <div style="margin-left: 2rem;">移动画布：鼠标右键拖拽画布空白处</div>
      <div style="margin-left: 2rem;">查看表详细：双击画布，某个表</div>
      <div style="margin-left: 2rem;">如何连线：鼠标移动到表格中间 》 待表格四周出现绿框 》 点击鼠标左键拖拽</div>
      <div style="margin-left: 2rem;">如何移动表：鼠标移动到表格四周 》 待表格四周出现绿框 》 点击鼠标左键拖拽</div>
      <div style="display: inline-block;
    padding: 10px 20px;
    background: #6e797a;
    color: #ffffff;
    border-radius: 2px;
    cursor: pointer;" @click="closeHelpeModal">
        已阅关闭
      </div>
    </div>
  </div>
</template>

<script>
var ipcRenderer;
if (window.require) {
  ipcRenderer = window.require("electron").ipcRenderer;
}
import graphIndex from "./editor/index.vue";
export default {
  components: {
    graphIndex,
  },
  name: "ermManage",
  watch: {},
  data() {
    return {
      focous: false, //专注模式
      xmlFiles: [],
      fileShowIndex: 0,
      childWindow: false, //是否子窗口
      maxWindowStatus: false, //是否最大化窗口
      helpeModal: true, //帮助窗口
    };
  },
  methods: {
    //保存文件
    saveFile(saveAs) {
      if (this.fileShowIndex == undefined || this.fileShowIndex < 0) {
        return;
      }
      this.$refs[
        "graph-index-" + this.xmlFiles[this.fileShowIndex].id
      ][0].saveFile(saveAs);
    },
    //关闭帮助窗口
    closeHelpeModal() {
      localStorage.setItem("helpeModal", false);
      this.helpeModal = false;
    },
    //文件变更-不包含内容
    changeFileStatus(status, index) {
      this.xmlFiles[index].change = status;
    },
    //文件名变更
    reloadFileName(name, index) {
      this.xmlFiles[index].name = name;
    },
    //创建新画板
    addNewGraph() {
      this.xmlFiles.push({
        name: "new_ERM",
        id: "graph-" + new Date().getTime(),
        change: false,
      });
      this.fileShowIndex = this.xmlFiles.length - 1;
    },
    //隐藏侧边
    maxWindow() {
      if (this.maxWindowStatus) {
        document.querySelector(".menu-left").style.display = "";
        document.querySelector(".index").style.padding = "10px";
      } else {
        document.querySelector(".menu-left").style.display = "none";
        document.querySelector(".index").style.padding = "0";
      }
      this.maxWindowStatus = !this.maxWindowStatus;
    },
    //切换文件
    changeFile(index) {
      if (index == this.fileShowIndex) return;
      this.fileShowIndex = index;
    },
    //打开新窗口
    openNewWindow() {
      if (ipcRenderer) {
        ipcRenderer.send("open-new-window", {
          url: "/index.html#/ermManageWindow",
          local: true,
        });
      }
    },
    //关闭文件
    closeFile(index) {
      //if (this.xmlFiles.length == 1) return;
      this.xmlFiles.splice(index, 1);
      if (this.fileShowIndex >= index && this.fileShowIndex > 0) {
        this.fileShowIndex = this.fileShowIndex - 1;
      }
    },
    choiceFile() {
      this.addNewGraph();
      setTimeout(() => {
        this.$refs[
          "graph-index-" + this.xmlFiles[this.fileShowIndex].id
        ][0].choiceFile();
      }, 100);
    },
  },
  mounted() {
    let _this = this;
    if (this.$route.path == "/ermManageWindow") {
      this.childWindow = true;
    }
    this.addNewGraph();
    this.helpeModal = localStorage.getItem("helpeModal");
    this.helpeModal = this.helpeModal == "false" ? false : true;
    //保存文件
    document.addEventListener('keydown', (e) => {
      if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
        e.preventDefault();
        this.saveFile(false);
      }
    });
  },
};
</script>

<style lang="less">
.focous {
  background: transparent !important;

  .geBackgroundPage {
    border: none !important;
    box-shadow: none !important;
  }
  .left-pane,
  .table,
  .note {
    opacity: 0.2;
    transition: opacity 0.2s linear !important;
  }
  .left-pane:hover,
  .table:hover,
  .note:hover {
    opacity: 1;
  }
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

.erm-main {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  box-sizing: border-box;
  //padding: 10px;
  padding-top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .helpe-moadl {
    padding: 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    background: #ffffff;
    a {
      color: blue !important;
    }
    div {
      margin: 6px 0;
    }
  }
  .flex1 {
    margin: 10px;
    flex: 1;
  }

  * {
    color: #6e797a;
    transition: all 0.1s linear;
  }

  .erm-main-top {
    padding-left: 10px;
    z-index: 9999;
    box-shadow: 0px 0px 2px #bfbfbf;
    background: #ffffff;
    white-space: nowrap;
    display: flex;
    width: 100%;
    overflow: auto;

    .item {
      padding: 6px;
      cursor: pointer;
    }

    .item:hover {
      svg path,
      i {
        fill: #3498db;
        color: #3498db;
      }
    }
    .file-tab.file-no-save {
      color: #f39c12 !important;
      margin-right: 4px;
      display: inline-block;
    }
    .file-tab.file-no-save::before {
      content: '*';
      color: #f39c12;
      font-weight: bold;
      margin-right: 4px;
      display: inline-block;
    }
    .file-tab.file-no-save.actived {
      color: #f39c12;
      border-bottom: 2px #e67e22 solid;
    }
    .file-tab {
      color: #a7a7a7;
      border-bottom: 2px transparent solid;
      font-size: 0.8rem;
      line-height: 1rem;
      padding-left: 6px;
      padding-right: 6px;
      padding-bottom: 2px;
      .fa-close {
        color: #cecece;
        cursor: pointer;
        margin-left: 4px;
      }

      .fa-close:hover {
        color: #e74c3c;
      }
    }
    .file-tab:hover {
      color: #3498db;
    }
    .file-tab.actived {
      color: #3498db;
      border-bottom: 2px #3498db solid;
    }
  }

  .chart-wrap {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .new-erm {
      width: 100%;
      height: 100%;
      text-align: center;
      margin-top: 200px;
      svg {
        cursor: pointer;
      }
      svg:hover {
        path {
          fill: #3498db;
        }
      }
    }
  }
}
</style>
